<template>
  <div>
    <home>
      <div slot="conter" class="topaa" data-attr="拍品首页">
        <a href="#">
          <h2>拍品首页</h2>
        </a>
      </div>
      <div slot="nav-menu">
        <el-submenu index="1-1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>商品系列</span>
          </template>
          <el-menu-item-group>
            <template slot="title">专场</template>
            <el-menu-item index="1-2" @click="AdditemClick('/auction/index/')">商品专场</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group index="1-3" title="添加系列">
            <template slot="title">添加列表</template>
            <el-menu-item index="1-4-2" @click="AdditemClick('/auction/item/')">添加商品</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="1-1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>拍品系列</span>
          </template>
          <el-menu-item-group>
            <template slot="title">专场</template>
            <el-menu-item index="1-4">拍品专场</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group index="1-3" title="添加系列">
            <template slot="title">添加列表</template>
            <el-menu-item index="1-4-3">添加拍品</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

      </div>
      <div slot="context">
        <div>
          <el-card class="box-card">
            <el-card class="box-card" v-if="auction_detail">
              <el-carousel :interval="2000" type="card" height="400px"
                           style="margin: 0 auto;width: 80%;margin-bottom: 10px">
                <el-carousel-item v-for="(item,index) in CarouselImg" :key="index">
                  <img :src="item.img" height="400px" width="100%">
                </el-carousel-item>
              </el-carousel>
            </el-card>
            <div style="display: flex">
              <div style="flex: 1;margin-right: 5px;">
                <img style="border-radius: 5px" :src="auction_list.cover" height="500" width="100%">
                <el-card shadow="always">
                  <div style="display: flex;justify-content: space-between">
                    <div v-if="result.id">
                      <p>拍品介绍:{{result.key}}</p>
                      <p style="font-size: 14px; color: #a3a3a5">详细内容:{{result.value}}</p>
                    </div>
                    <div v-else>
                      <p>拍品介绍:无</p>
                      <p style="font-size: 14px; color: #a3a3a5">详细内容:无</p>
                    </div>
                    <div>
                      <el-button v-if="result.id"
                                 type="primary"
                                 size="mini" @click="dialogFormVisible2=true">编辑拍品
                      </el-button>
                      <el-button v-else
                                 size="mini"
                                 type="success" @click="dialogFormVisible2=true">创建拍品
                      </el-button>
                    </div>
                  </div>

                </el-card>

              </div>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <h3 align="center" style="color: #00FFFF">拍品专场：{{auction_list.title}}</h3>
                  <span class="text status">拍卖状态：
                    <el-tag size="medium" :type="tag[auction_list.status]">{{auction_list.status_name}}</el-tag>
                  </span>
                  <p style="color: #a3a3a5;font-size: 14px;float: right">单场保证金：{{auction_list.deposit}}￥</p>
                </div>
                <div style="display: flex;justify-content: space-between;font-size: 14px;color: #cccccc">
                  <p>起拍价:{{auction_list.start_price}}￥</p>
                  <p>参考价格{{auction_list.reserve_price}}￥~{{auction_list.highest_price}}￥</p>
                  <p>加价幅度:{{auction_list.unit}}￥</p>
                </div>
                <div>
                  <el-button style="float: right;margin-top: 20px"
                             size="mini"
                             type="success" @click="CreateClick()">添加图片
                  </el-button>

                  <el-dialog title="拍品规格系列" :visible.sync="dialogFormVisible2">
                    <el-form :model="result">
                      <el-form-item label="拍品项">
                        <el-input v-model="result.key" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="拍品介绍">
                        <el-input v-model="result.value" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                      <el-button type="primary" @click="DetailClick()">确 定</el-button>
                    </div>
                  </el-dialog>

                  <el-dialog title="拍品图片系列" :visible.sync="dialogFormVisible">
                    <el-form :inline="true" ref="ruleForm" :rules="rules" :model="formInline" class="demo-form-inline">
                      <el-form-item label="排序：" prop="order">
                        <el-input v-model="formInline.order" placeholder="请输入顺序优先级" type="number"></el-input>
                      </el-form-item>
                      <el-form-item label="是否轮播：" prop="carousel">
                        <el-switch
                                v-model="formInline.carousel">
                        </el-switch>
                      </el-form-item>
                      <el-form-item label="图片上传：" prop="img">
                        <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :http-request="handleChange"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                list-type="picture">
                          <el-button size="small" type="primary" v-model="fileList">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                      </el-form-item>

                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="reSubimit(true)">取 消</el-button>
                      <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
                    </div>
                  </el-dialog>

                  <el-table
                          :data="auction_detail"
                          style="width: 100%;">
                    <el-table-column
                            sortable
                            prop="order"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            label="是否轮播">
                      <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.carousel"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                            label="图片">
                      <template scope="scope">
                        　　　　 <img :src="scope.row.img" width="100" height="100" class="head_pic"/>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作">
                      <template slot-scope="scope">

                        <el-button
                                type="primary"
                                size="mini" @click="EditClick(scope.row.id)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger" @click="DeleteClick(scope.row.id)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-card>

            </div>
          </el-card>
        </div>

      </div>
    </home>
  </div>
</template>

<script>
  import Home from "./Home";
  import COS from "cos-js-sdk-v5";
  import {
    getHomeAuctionItemImg,
    AddHomeAuctionItemImg,
    TX_COS,
    DeleteAuctionItemImg,
    getHomeAuctionDetailItem
  } from "network/home"

  export default {
    name: "HomeItemDetail",
    components: {Home},
    data() {
      return {
        formInline: {
          order: '',
          carousel: true,
          img: "",
          item_id: "",
          id: null
        },
        auction_detail: [],
        dialogFormVisible: false,
        dialogFormVisible2: false,
        auction_list: [],
        result: {
          item_id: '',
          id: '',
          key: '',
          value: ''
        },
        tag: {
          1: 'info',
          2: '',
          3: 'success',
          4: 'warning',
          5: 'danger'
        },
        fileList: [],
        rules: {
          carousel: [{required: true, message: '请选择是否轮播', trigger: 'blur'}],
          order: [{required: true, message: '请选择排序', trigger: 'blur'}],
          img: [{required: true, message: '请选择图片', trigger: 'blur'}],
        },
        n: null
      }
    },
    created() {
      let auction_list = JSON.parse(decodeURIComponent(this.$route.query.goods));
      let gid = this.$route.params.gid
      let n = (auction_list.goods || []).findIndex(item => item.id == gid)
      this.auction_list = auction_list.goods[n]
      getHomeAuctionItemImg(gid).then(res => {
        console.log(res.auction_detail);
        this.auction_detail = res.auction_detail
        if (res.result !== undefined) {
          this.result = res.result
        }
        this.result.item_id = this.auction_list.id
        this.formInline.item_id = gid
        console.log(this.auction_list, this.result);
      })

    },
    methods: {
      CreateClick() {
        this.reSubimit(false)
        this.dialogFormVisible = true
      },
      onSubmit(formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // TX_COS().then(data => {
            //       const cos = new COS({
            //         // 必选参数
            //         getAuthorization: (options, callback) => {
            //           const obj = {
            //             TmpSecretId: data.credentials.tmpSecretId,
            //             TmpSecretKey: data.credentials.tmpSecretKey,
            //             XCosSecurityToken: data.credentials.sessionToken,
            //             StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
            //             ExpiredTime: data.expiredTime // 时间戳，单位秒，如：1580000900
            //           }
            //           callback(obj)
            //         }
            //       })
            //       cos.putObject({
            //         Bucket: 'wx-1304867879', /* 必须 */
            //         Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
            //         Key: that.fileList[0].name,              /* 必须 */
            //         StorageClass: 'STANDARD',
            //         Body: that.fileList[0].file, // 上传文件对象
            //         onProgress: function (progressData) {
            //           console.log(JSON.stringify(progressData));
            //         }
            //       }, function (err, data) {
            //             AddHomeAuctionItemImg(that.formInline).then(res=>{
            //               console.log(res);
            //               that.dialogFormVisible = false
            //             })
            //       });
            //     }
            // )
            AddHomeAuctionItemImg(that.formInline).then(res => {
              if (res.status) {
                // 如果是编辑
                if (that.formInline.id == res.message) {
                  that.auction_detail[that.n].carousel = that.formInline.carousel
                  that.auction_detail[that.n].order = that.formInline.order
                  that.auction_detail[that.n].img = that.formInline.img
                  that.n = null
                  that.reSubimit()
                  return
                }
                // 添加
                that.formInline.id = res.message
                // 浅拷贝
                let auction_create = Object.assign({}, that.formInline)
                that.auction_detail.push(auction_create)
                that.dialogFormVisible = false
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      DeleteClick(index) {
        DeleteAuctionItemImg(this.auction_list.id, index).then(res => {
          if (res.status) {
            let n = (this.auction_detail || []).findIndex(item => item.id == index)
            this.auction_detail.splice(n, 1)
          } else {
            console.log(res.message);
          }
        })
      },
      EditClick(index) {
        this.n = (this.auction_detail || []).findIndex(item => item.id == index)
        let auction_item = this.auction_detail[this.n]
        this.formInline.carousel = auction_item.carousel
        this.formInline.item_id = auction_item.item
        this.formInline.order = auction_item.order
        this.formInline.img = auction_item.img
        this.formInline.id = auction_item.id
        this.dialogFormVisible = true
        console.log(this.formInline);

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      reSubimit(item) {
        if (item) {
          this.resetForm('ruleForm')
        }
        Object.keys(this.formInline).forEach(item => {
          this.formInline[item] = ""
        })
        this.formInline.carousel = true
        // this.formInline.img = "https://wx-1304867879.cos.ap-guangzhou.myqcloud.com/f67yqdi41624714020817.jpg"
        this.formInline.item_id = this.auction_list.id
        this.dialogFormVisible = false
        console.log(this.formInline);

      },
      DetailClick() {
        console.log(this.result);
        getHomeAuctionDetailItem(this.result).then(res => {
          if (res.status) {
            if (!this.result.id) {
              this.result.id = res.message
            }
            this.dialogFormVisible2 = false
          }
        })

      },
      AdditemClick(url) {
        let iid = this.$route.params.iid
        let auction_list = this.$route.query.goods
        this.$router.push({
          path: url + iid, query: {
            goods: auction_list
          }
        }).catch(err => {
        })
      },
      handleChange(file, fileList) {
        this.fileList[0] = {
          file: file.file,
          name: this.randomString() + '.jpg'
        }
        this.formInline.img = "'https://wx-1304867879.cos.ap-guangzhou.myqcloud.com/" + this.fileList[0].name
        console.log(this.fileList);
      },
      randomString() {
        return Math.random().toString(36).slice(-8) + String(new Date().getTime())
      },
      handleRemove(file, fileList) {
        this.formInline.img = ""
        console.log(file.name, this.is_file);
      }
    },
    computed: {
      CarouselImg() {
        let carouse_list = this.auction_detail.filter(item => {
          return item.carousel
        })
        return carouse_list
      }
    }
  }
</script>

<style scoped>

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .box-card {
    flex: 2;
  }

</style>